<template>
	<view class="wrap">
		<view class="info">
			<view class="flex">
				<view class="width-30">报价员</view>
				<view class="width-70">{{name}}</view>
			</view>
			<view class="flex">
				<view class="width-30">裸车价格</view>
				<view class="width-60"><input type="text" class="font-26" v-model="updata.quoted_price" placeholder="请输入" /></view>
				<view class="width-10">万</view>
			</view>
			<view class="flex">
				<view class="width-30">提车期限</view>
				<view class="width-60">
					<view class="color-666" @click="ransfertCar = true">
						<text v-if="JSON.stringify(deliverydate) !== '{}'">{{ deliverydate.label }}</text>
						<text v-else>请选择</text>
					</view>
				</view>
				<view class="10"><u-icon name="arrow-right" class="ml-5" color="#9A9A9A" size="24rpx"></u-icon></view>
			</view>
			<view class="flex border-bottom0">
				<view class="width-30">备注</view>
				<view class="width-70"><input type="text"  placeholder="请输入" v-model="updata.remark" /></view>
			</view>
		</view>

		<view class="btn-bg-yellow" @click="AddCarFindQuotedPrice">确认报价</view>

		<u-popup v-model="ransfertCar" class="ransfertCar" mode="bottom" border-radius="25" width="100%" height="540rpx">
			<view class="title">交车日期</view>
			<view class="list" v-for="(it, index) in carDateList" :key="index" @click="selectRansferCarDate(it)">{{ it.label }}</view>
			<view class="bottom">注：交车日期在合同生效后开始计算</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			name:'',
			updata:{
				car_find_id: '',//寻车单id
				quoted_price: null,//裸车价格
				get_car_deadline: '', //提车期限
				remark: '' //备注
			},
			ransfertCar: false,
			deliverydate: {},
			carDateList: [
				{
					value: '7',
					label: '7日内交车'
				},
				{
					value: '15',
					label: '15日内交车'
				},
				{
					value: '30',
					label: '30日内交车'
				}
			]
		};
	},
	onLoad(options) {
		console.log(options,this.$store.state)
		this.name=this.$store.state.userInfoDetail.user.userName
		this.updata.car_find_id=options.id
	},
	methods: {
		selectRansferCarDate(val) {
			console.log('交车日期', val);
			this.ransfertCar = false;
			this.deliverydate = val;
			this.updata.get_car_deadline=val.value
		},
	  async AddCarFindQuotedPrice() {
			if(this.updata.quoted_price&&this.updata.get_car_deadline ){
				try{
					const res = await this.$api.carOrder.AddCarFindQuotedPrice(this.updata) 
					console.log(res)
					uni.showToast({
						title: '操作成功',
						duration: 2000,
						icon: 'success'
					});
					setTimeout(function() {
						uni.redirectTo({
							url: '/pages_order/orderAdmin/orderAdmin'
						});
					}, 2000);
				}catch(e){
					console.log(e)
					//TODO handle the exception
				}
			}
		},
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	height: 100vh;
	background-color: #f6f6f6;
	padding-top: 20rpx;
	.info {
		width: 94%;
		margin: auto 3%;
		background: #ffffff;
		border-radius: 20rpx;
		.flex {
			width: 96%;
			margin: auto;
			height: 90rpx;
			line-height: 90rpx;
			border-bottom: 1rpx solid #e5e5e5;
			input {
				height: 88rpx;
				vertical-align: middle;
			}
		}
		.border-bottom0 {
			border-bottom: 0rpx;
		}
	}
	.btn-bg-yellow {
		width: 90%;
		margin: 5%;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(-90deg, #fbd220, #ffe23e);
	}
}
.ransfertCar {
	.title {
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-size: 36rpx;
		color: #333333;
		border-bottom: 2rpx solid #eeeeee;
	}
	.list {
		height: 105rpx;
		line-height: 105rpx;
		text-align: center;
		font-size: 32rpx;
		color: #666;
	}
	.bottom {
		height: 110rpx;
		line-height: 110rpx;
		border-bottom: 0px;
		font-size: 26rpx;
		color: #999;
		padding-left: 20rpx;
		border-top: 2rpx solid #eeeeee;
	}
}
</style>
